<template>
    <el-card>
        <div class="search">
            <el-input v-model="searchForm.out_trade_no" style="width: 240px" placeholder="订单号">
                <template #prefix>
                    <el-icon class="el-input__icon">
                        <search />
                    </el-icon>
                </template>
            </el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">查询</el-button>
        </div>
        <el-table :data="orderData" style="width: 100%">
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="out_trade_no" label="订单号" />
            <el-table-column prop="hospital_name" label="就诊医院" />
            <el-table-column prop="service_name" label="陪诊服务" />
            <el-table-column label="陪护师头像">
                <template #="{row}">
                    <el-image style="width: 40px;height: 40px;" :src="row.companion.avatar" />
                </template>
            </el-table-column>
            <el-table-column prop="tel" label="陪护师手机号" />
            <el-table-column prop="price" label="总价" />
            <el-table-column prop="paidPrice" label="已付" />
            <el-table-column prop="order_start_time" label="下单时间">
                <template #={row}>
                    {{ formatDate(row.order_start_time) }}
                </template>
            </el-table-column>
            <el-table-column prop="trade_state" label="订单状态">
                <template #={row}>
                    <el-tag :type="statusMap(row.trade_state)">{{row.trade_state}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="service_state" label="接单状态" />
            <el-table-column prop="client.mobile" label="联系人手机号" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm 
                    v-if="scope.row.trade_state==='待服务'"
                     confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                        icon-color="#626AEF" title="是否确认删除?" @confirm="confirmEven(scope.row.out_trade_no)">
                        <template #reference>
                            <el-button type="primary" link>服务完成</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button v-else disabled type="primary" link>暂无服务</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="paginationData.pageNum" :page-size="paginationData.pageSize" :size="size"
            :disabled="disabled" :background="background" layout="->,total, prev, pager, next"
            :total="paginationData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
</template>
<script setup>
import {ref,reactive,onMounted} from 'vue'
import { reqAdminOrder ,reqUppdateOrder} from '../../../api/order';
onMounted(()=>{
    getOrderList()

})

//订单查询
const searchForm=reactive({
    out_trade_no:''
})
const onSubmit=()=>{
    getOrderList(searchForm)
}


// 订单管理列表
const paginationData=reactive({
    pageNum:1,
    pageSize:10,
    total:0,
    out_trade_no:''
})
const orderData=ref('')
const getOrderList=async(params=[])=>{
    const res=await reqAdminOrder({...paginationData,...params})
    console.log(res);
    if(res.data.code === 10000){
        orderData.value=res.data.data.list
        paginationData.total=res.data.data.total
    }
}

//下单时间
const formatDate = (timestamp) => {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};
//订单状态
const statusMap=(key)=>{
    const colorMap = {
        '待支付': '#ffa200',
        '待服务': '#1da6fd',
        '已完成': '#21c521',
        '已取消':'info'

    }
    return colorMap[key]
}

//分页
const handleSizeChange=(val)=>{
    paginationData.pageSize=val
    getOrderList()
}
 const handleCurrentChange=(val)=>{
    paginationData.pageNum=val
    getOrderList()
 }

 //服务完成确定
 const confirmEven=async(id)=>{
    const res=await reqUppdateOrder({id})
   if(res.data.code=10000){
     getOrderList()
   }
    


 }
</script>

<style scoped>
.search{
    float:right;
}

</style>
